<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>运动会</title>

  <link href="/css/common.css" rel="stylesheet">
  <link href="/css/index.css" rel="stylesheet">

  <% include common/main-lib.ejs %>
</head>
<body>

<div id="app">
  <el-container>
    <el-header>
      田径运动会管理系统
    </el-header>
    <el-container>
      <el-container>
        <el-main>
          <el-row type="flex" class="row-bg" justify="space-around">
            <h1><%= pageName %></h1>
          </el-row>
          <el-row type="flex" class="row-bg" justify="space-around">
            <el-form ref="form" :model="form" label-width="80px" :rules="rules" style="width: 400px">

              <el-form-item label="用户ID" prop="userId">
                <el-input v-model="form.userId"></el-input>
              </el-form-item>

              <el-form-item label="密码" prop="password">
                <el-input v-model="form.password" type="password"></el-input>
              </el-form-item>

              <el-form-item label="用户类别" prop="userType">
                <el-select v-model="form.userType" placeholder="请选择">
                  <el-option label="运动员" value="player"></el-option>
                  <el-option label="管理员" value="admin"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="submitForm('form')">登录</el-button>
                <el-button @click="resetForm('form')">重置</el-button>
              </el-form-item>
            </el-form>
          </el-row>
        </el-main>
      </el-container>
    </el-container>
    <el-footer>田径运动会管理系统</el-footer>
  </el-container>
</div>

<script>
  new Vue({
    el: '#app',
    data () {
      let validateUserId = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入您的ID'))
        } else {
          if (this.form.userType === "player") {
            if(this.playerIds.includes(value)) {
              callback()
            } else {
              callback(new Error('你输入的ID不存在'))
            }
          } else if (this.form.userType === "admin") {
            if (value === "admin") {
              callback()
            } else {
              callback(new Error('你输入的ID不存在'))
            }
          }
        }
      }
      return {
        form: {
          userType: '',
          userId: '',
          password: ''
        },
        rules: {
          userType: [
            { required: true, message: '请选择用户类别', trigger: 'change' }
          ],
          userId: [
            { required: true, validator: validateUserId, trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ]
        },
        players: [],
        playerIds: [],
        playerList: []
      }
    },
    methods: {
      doSubmit() {
        let _this = this;

        axios.post('/signIn', _this.form)
          .then(function (response) {
            if (response.data.status === 200) {
              _this.$message.success(response.data.msg)
              setTimeout(() => {
                location.href = "/" + _this.form.userType;
              }, 1000)
            }
          })
          .catch(function (error) {
            console.log(error)
            _this.$alert('服务器错误，请稍后重试', {
              confirmButtonText: '确定',
              type: 'error'
            })
          });
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.doSubmit();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      formatter(row, column) {
        return row.address;
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      getPlayerList() {
        return axios.get('/list/player');
      },
      toPlayerList(response) {
        if (response.data.status === 200) {
          this.playerList = response.data.data;
        } else {
          console.log(error)
          this.$alert('服务器错误，请稍后重试', {
            confirmButtonText: '确定',
            type: 'error'
          })
        }
      },
      toPlayers() {
        let _this = this;

        this.players = this.playerList.map(e => {
          return Object.assign(e, {
            playerSex: e.playerSex === "0" ? "女" : "男"
          })
        })
      },
      toPlayerIds() {
        let _this = this;
        this.playerList.forEach(e => {
          _this.playerIds.push(e.playerId)
        })
      }
    },
    created() {
      let _this = this;

      axios.all([_this.getPlayerList()])
        .then(axios.spread(function (playerList) {
          _this.toPlayerList(playerList);
          _this.toPlayers();
          _this.toPlayerIds();
        }));
    }
  })
</script>
</body>
</html>
